<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         .button{
             transform: skewX(-45deg);
             background: #ff6670;
             width: 100px;
              color: white;
             display: block;
         }
        .button >div{
            transform: skewX(45deg);
            margin-left: 14px;
        }
         .button1 {
             position: relative;
             display: inline-block;
             color: white;
         }

         .button1::before {
             content: '';
             position: absolute;
             top: 0; right: 0; bottom: 0; left: 0;
             z-index: -1; /*由于伪元素生成的内容是层叠在内容之上，所以给它设置背景会遮挡内容 我们可以设置index：-1*/
             background: #ff6670;
             transform: skew(45deg);
         }
    </style>
</head>
<body>
<a href="" class="button">
     <div>Click me</div>
</a>
<br>
<br>
<a href="" class="button1">
    <div>Click me</div>
</a>
</body>
</html>
